<template>
	<view>
		<view class="tuijian_set">
			<view class="txt">
				<view class="title">个性化内容推荐</view>
				<text class="cont">开启后将开启个性化推荐内容，提升您的浏览和购物体验，修改并重启APP生效</text>
			</view>
			<u-switch v-model="tuijian" active-color="green" inactive-color="#eee" @change="tuijian_save"></u-switch>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
				<view class="item_title">{{item.title}}</view>
				<view class="item_icon">
					<u-icon name="arrow-right" color="#e4e4e4"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				tuijian:true
			}
		},
		onLoad() {
			this.tuijian=uni.getStorageSync('tuijian');
			this.getList();
		},
		methods: {
			getList(){
				this.$show();
				this.$http.post('index/question',{
					page:this.page,
					pagesize:'20',
					ids:'18,19'
				}).then((res)=>{
					this.$hide()
					this.list = res.data.list;
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:'questionDetail?id='+id
				})
			},
			tuijian_save(e){
				console.log(e);
				uni.setStorageSync('tuijian',e);
			}
		}
	}
</script>

<style lang="scss">
.list{
	width:96%;
	margin:0 3%;
	.item{
		display: flex;
		align-items: center;
		line-height: 90upx;
		border-top: 1rpx solid #eee;
		.item_title{
			flex: 1;
			font-size: 32upx;
			font-weight: 500;
			padding: 0 20upx;
		}
		.item_icon{
			
		}
	}
}

.tuijian_set{width:94%;margin:0 3%; display: flex;flex-direction: row;justify-content: space-between;}
.tuijian_set .txt{flex-direction: column;padding:20rpx;}
.tuijian_set .txt .title{font-size:32rpx;font-weight: bold; color:#222;line-height: 60rpx;}
.tuijian_set .txt .cont{font-size:28rpx;line-height:52rpx;color:#777;}
</style>
